import React from 'react';
import Card from "@/pages/customer/information/components/Card";
import {Icon, Tooltip} from "antd";
import styles from './index.less';


export interface PreferenceCardProps {
  [propName: string]: any;
}

const PreferenceCard: React.FC<PreferenceCardProps> = (props) => {
  const {peferenceInfoList=[{"type":"1010","typeName":"Entertainment","subType":null,"subTypeName":null,"system":"999","values":[{"id":"47","message":"Chinese","messageType":2,"operator":"test.rm","operatorId":"3","createTime":"20190613172305","newValue":false,"oldMessage":"Chinese","editAble":true,"showFlag":true,"operation":"N"},{"id":"100000000065","message":"English","messageType":2,"operator":"admin","operatorId":"10","createTime":"20190717144334","newValue":false,"oldMessage":"English","editAble":true,"showFlag":true,"operation":"N"},{"id":"100000000079","message":"Korean 2","messageType":2,"operator":"admin","operatorId":"10","createTime":"20190724094140","newValue":false,"oldMessage":"Korean 2","editAble":true,"showFlag":true,"operation":"N"},{"id":"100000000083","message":"Cantonese","messageType":2,"operator":"admin","operatorId":"10","createTime":"20190724094903","newValue":false,"oldMessage":"Cantonese","editAble":true,"showFlag":true,"operation":"N"},{"id":"100000000082","message":"Hokkien","messageType":2,"operator":"admin","operatorId":"10","createTime":"20190724094903","newValue":false,"oldMessage":"Hokkien","editAble":true,"showFlag":true,"operation":"N"},{"id":"100000000080","message":"hello everyone this is configuration preference，hello every","messageType":2,"operator":"admin","operatorId":"10","createTime":"20190724094903","newValue":false,"oldMessage":"hello everyone this is configuration preference，hello every","editAble":true,"showFlag":true,"operation":"N"},{"id":"100000000081","message":"1","messageType":1,"operator":"admin","operatorId":"10","createTime":"20190724094903","newValue":false,"oldMessage":"1","editAble":true,"showFlag":true,"operation":"N"},{"id":"100000000091","message":"123456","messageType":1,"operator":"admin","operatorId":"10","createTime":"20191031174629","newValue":false,"oldMessage":"123456","editAble":true,"showFlag":true,"operation":"N"}],"showIconName":"iconfont rws-music"},{"type":"1011","typeName":"Entertainment","subType":null,"subTypeName":null,"system":"999","values":[{"id":"100000000089","message":"KTV","messageType":2,"operator":"admin","operatorId":"10","createTime":"20191031175239","newValue":false,"oldMessage":"KTV","editAble":true,"showFlag":true,"operation":"N"},{"id":"100000000066","message":"Comedy show","messageType":2,"operator":"admin","operatorId":"10","createTime":"20190717144627","newValue":false,"oldMessage":"Comedy show","editAble":true,"showFlag":true,"operation":"N"},{"id":"100000000084","message":"Street performance","messageType":2,"operator":"admin","operatorId":"10","createTime":"20190724094903","newValue":false,"oldMessage":"Street performance","editAble":true,"showFlag":true,"operation":"N"},{"id":"100000000088","message":"555555","messageType":1,"operator":"admin","operatorId":"10","createTime":"20191031174629","newValue":false,"oldMessage":"555555","editAble":true,"showFlag":true,"operation":"N"},{"id":"100000000090","message":"555555","messageType":1,"operator":"admin","operatorId":"10","createTime":"20191031174629","newValue":false,"oldMessage":"555555","editAble":true,"showFlag":true,"operation":"N"}],"showIconName":"iconfont rws-entertainment"},{"type":"1012","typeName":"Sports","subType":null,"subTypeName":null,"system":"999","values":[{"id":"100000000087","message":"Fishing","messageType":2,"operator":"admin","operatorId":"10","createTime":"20190918155545","newValue":false,"oldMessage":"Fishing","editAble":true,"showFlag":true,"operation":"N"},{"id":"100000000093","message":"haha","messageType":1,"operator":"admin","operatorId":"10","createTime":"20191102172817","newValue":false,"oldMessage":"haha","editAble":true,"showFlag":true,"operation":"N"}],"showIconName":"iconfont rws-sport"},{"type":"1013","typeName":"Watch Brand","subType":null,"subTypeName":null,"system":"999","values":[{"id":"50","message":"Audemars Piguet","messageType":2,"operator":"test.rm","operatorId":"3","createTime":"20190613172305","newValue":false,"oldMessage":"Audemars Piguet","editAble":true,"showFlag":true,"operation":"N"},{"id":"100000000092","message":"123456","messageType":1,"operator":"admin","operatorId":"10","createTime":"20191031174629","newValue":false,"oldMessage":"123456","editAble":true,"showFlag":true,"operation":"N"}],"showIconName":"iconfont rws-watch"},{"type":"1014","typeName":"Fashion","subType":null,"subTypeName":null,"system":"999","values":[{"id":"51","message":"Burberry","messageType":2,"operator":"test.rm","operatorId":"3","createTime":"20190613172305","newValue":false,"oldMessage":"Burberry","editAble":true,"showFlag":true,"operation":"N"}],"showIconName":"iconfont rws-fashion"},{"type":"1015","typeName":"Food","subType":null,"subTypeName":null,"system":"999","values":[{"id":"52","message":"Indonesian","messageType":2,"operator":"test.rm","operatorId":"3","createTime":"20190613172305","newValue":false,"oldMessage":"Indonesian","editAble":true,"showFlag":true,"operation":"N"}],"showIconName":"iconfont rws-FB-"},{"type":"1016","typeName":"Alcohol","subType":null,"subTypeName":null,"system":"999","values":[{"id":"54","message":"White Wine","messageType":2,"operator":"test.rm","operatorId":"3","createTime":"20190613172305","newValue":false,"oldMessage":"White Wine","editAble":true,"showFlag":true,"operation":"N"},{"id":"53","message":"Sparkling Wine","messageType":2,"operator":"test.rm","operatorId":"3","createTime":"20190613172305","newValue":false,"oldMessage":"Sparkling Wine","editAble":true,"showFlag":true,"operation":"N"}],"showIconName":"iconfont rws-alchol"}]} = props;
  return (
    <Card
      title="PREFERENCE"
      className={styles.antcardbordered}
      rightContent={
        <span className={styles.rightContent}>
              <Tooltip
                title="Preference Detail"
                placement="top"
                overlayStyle={{fontSize: '12px'}}
              >
                <i className="iconfont rws-more" style={{cursor: 'pointer'}}/>
              </Tooltip>
        </span>
      }
    >
      <div className={styles.preference}>
        {peferenceInfoList &&
        peferenceInfoList.map((preferenceObj: any, key: any) => {
          return (
            <div className={styles.lineBox} key={key}>
              {preferenceObj.system && preferenceObj.system === '100' ? (
                <div>
                  <Icon
                    type={preferenceObj.showIconName}
                    className="iconfont"
                    theme="twoTone"
                    twoToneColor="#259DDB"
                    style={{fontSize: '14px', color: '#259ddb'}}
                  />
                  <span className={styles.dataContentRight}>{preferenceObj.typeName}</span>
                </div>
              ) : (
                <div>
                          <span
                            className={preferenceObj.showIconName}
                            style={{fontSize: '14px', color: '#bfbfbf'}}
                          />
                  <span className={styles.contentRight}>{preferenceObj.typeName}</span>
                </div>
              )}
            </div>
          );
        })}
      </div>
    </Card>
  );
};

export default PreferenceCard;
